<template>
	<view class="top-tabbar-wrap">
		<view :style="{height:statuHeight+'px',backgroundColor:backColor}"></view>
		<view :style="{backgroundColor:backColor}" class="top-tabBer">
			<view class="iconfont back" @click="iconsClick" v-show="!back"></view>
			<view class="iconfont back" @click="iconsClick" v-show="back">&#xe614;</view>
			<view class="contont" v-if="tabTitle">{{tabTitle}}</view>
			<view class="tab-right">
				 <slot name="tab-right"></slot>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		props:{
			back:{
				type: Boolean,
				default: true
			},
			tabTitle:'',
			backColor:{
				type:'',
			},
		},
		mounted() {
		},
		data() {
			return {
				statuHeight: uni.getSystemInfoSync().statusBarHeight // 状态栏高度
			}
		},
		methods:{
			iconsClick() {
				this.$emit("backClick")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-tabBer{
		height: 88rpx;
		line-height: 88rpx;
		display: flex;
		align-items: center;
		
		padding: 0 28rpx;
		.back{
			flex: 1;
			color: #FFFFFF;
		}
		.contont{
			flex: 1;
			text-align: center;
			font-size: 30rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #F4F4F4;
		}
		.tab-right{
			flex: 1;
			text-align: right;
			color: #FFFFFF;
			font-size: 48rpx;
		}
	}
</style>
